<script setup lang="ts">
import type { STORAGE_MODES } from './constant'
import { debounce } from 'lodash-es'
import { productionApi } from '~/api'
import { sleep } from '~/composables/sleep'
import BlockHead from './block-head.vue'
import DrawerItemSettings from './drawer-item-settings.vue'
import LineChart from './line-chart.vue'

defineOptions({
  name: 'ItemServen',
})

const lineWrapperRef = ref<HTMLDivElement>()

const title = ref('')
const lists = ref<{ title: string, dataList: { key: string, val: string }[] }[]>([])
const configs = ref<{
  id: number
  title: string
  name: string
  location: 0 | 1
  indicatorNumber: string
  timeType: STORAGE_MODES
}[]>([])

const visible = ref(false)

async function getConfig() {
  const { data } = await productionApi.getConfig(1)
  title.value = data?.[0]?.title ?? ''
  configs.value = data ?? []
}
async function getConfigsData() {
  const { data } = await productionApi.getConfigData(1)
  lists.value = data.rightData ?? []
}

async function handleSaveSuccess() {
  await getConfigsData()
  await getConfig()
}

const resizeObserver = new ResizeObserver(
  // 使用防抖（延迟 200ms 执行）
  debounce(async (entries: any) => {
    const old = lists.value
    lists.value = []
    await nextTick()
    lists.value = old
  }, 200),
)

onBeforeUnmount(() => {
  if (lineWrapperRef.value) {
    resizeObserver.unobserve(lineWrapperRef.value)
    resizeObserver.disconnect()
  }
})

onMounted(async () => {
  if (lineWrapperRef.value) {
    resizeObserver.observe(lineWrapperRef.value)
  }
  await getConfig()
  await getConfigsData()
})
</script>

<template>
  <div class="h-full w-full flex flex-auto flex-col">
    <BlockHead is-big :title="title || '标题'">
      <template #extra>
        <span class="ml-auto mr-15 flex cursor-pointer items-center justify-center text-sm text-[rgba(255,255,255,0.7)] opacity-70 transition-all hover:opacity-100" title="设置" @click.stop="visible = true">
          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
            <path fill="currentColor" d="m8.686 4l2.607-2.607a1 1 0 0 1 1.414 0L15.314 4H19a1 1 0 0 1 1 1v3.686l2.607 2.607a1 1 0 0 1 0 1.414L20 15.314V19a1 1 0 0 1-1 1h-3.686l-2.607 2.607a1 1 0 0 1-1.414 0L8.686 20H5a1 1 0 0 1-1-1v-3.686l-2.607-2.607a1 1 0 0 1 0-1.414L4 8.686V5a1 1 0 0 1 1-1zM12 15a3 3 0 1 0 0-6a3 3 0 0 0 0 6" />
          </svg>
        </span>
      </template>
    </BlockHead>
    <div class="block-body h-150 w-full flex flex-auto flex-col items-center gap-3 overflow-auto py-3">
      <div class="h-full w-full flex items-center rounded">
        <div class="h-full w-full flex flex-auto items-center overflow-auto" style="scrollbar-width: none;">
          <div v-if="lists.length > 0" ref="lineWrapperRef" class="h-full w-full flex flex-wrap items-center gap-3">
            <div v-for="item in lists" :key="item.title" class="overflow-auto rounded-lg bg-[rgba(0,0,0,0.4)] p-3" :class="[`ww-${lists.length}`]">
              <LineChart :data="item" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <DrawerItemSettings v-model="visible" :data="configs" :location="1" :maxlength="6" @save-success="handleSaveSuccess" />
  </div>
</template>

<style lang="scss" scoped>
.block-body {
  .ww-6 {
    flex: 0 0 calc(33.33% - 0.5rem);
    height: calc(50% - 0.375rem);
  }
  .ww-5 {
    flex: 0 0 calc(33.33% - 0.5rem);
    height: calc(50% - 0.375rem);
    &:nth-child(4),
    &:nth-child(5) {
      flex: 0 0 calc(50% - 0.375rem);
    }
  }
  .ww-4 {
    flex: 0 0 calc(33.33% - 0.5rem);
    height: calc(50% - 0.375rem);
    &:last-child {
      flex: auto;
    }
  }
  .ww-3 {
    flex: 0 0 calc(33.33% - 0.5rem);
    height: 100%;
  }
  .ww-2 {
    flex: 0 0 calc(50% - 0.375rem);
    height: 100%;
  }
  .ww-1 {
    flex: auto;
    height: 100%;
  }
}

.item-fjbzj {
  width: 33.33%;

  img {
    // width: 100%;
    height: 164px;
  }
}

.equipment-num,
.meter-reading {
  display: block;
  position: absolute;
  border-radius: 2px;
  // background: rgba(226, 81, 252, 0.5);
  text-align: center;
}

.equipment-num {
  width: auto;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  color: #ffffff;
  text-shadow: 1px 0px 1px #10649C;
  @apply line-clamp-1;
}

.equipment-num-center {
  top: 178px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
